<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Icons - 基本示例</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="../dist/layui.css" />
    <style type="text/css">
        .container-grid {
            background-image: linear-gradient(0deg,#f5f5f5 1.1px, transparent 0), linear-gradient(90deg,#f5f5f5 1.1px, transparent 0);
            background-size: 20px 20px;
            background-color: #e8e8e8;
        }
        .view-panel{
            margin-bottom: 0;
        }
        .view-icon-show{
            display: inline-block;
            width: 60px;
            height: 60px;
            line-height: 60px;
            font-size: 30px;
            text-align: center;
            border: 2px solid #ffbb4d;
            border-radius: 5px;
            margin-bottom: 15px;
        }
        .view-icon-show .view-icon-info{
            font-size: 12px;
        }
        .view-icon-show .view-icon-info{
            display: none;
        }
    </style>
</head>
<body class="container container-grid">
    <div class="row">
        <div class="view-panel" skin="default">
            <div class="view-header">
                <div class="title">小图标</div>
            </div>
            <div class="view-body">
                <div class="view-icon-show">
                    <i class="icon-code"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-code</span><span class="info-content">\e900</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-tachometer"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-tachometer</span><span class="info-content">\e901</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-info-circle"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-info-circle</span><span class="info-content">\e902</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-wechat"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-wechat</span><span class="info-content">\e903</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-activity"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-activity</span><span class="info-content">\e904</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-airplay"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-airplay</span><span class="info-content">\e905</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-monitor"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-monitor</span><span class="info-content">\e983</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-alert-circle"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-alert-circle</span><span class="info-content">\e906</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-alert-octagon"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-alert-octagon</span><span class="info-content">\e907</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-help-circle"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-help-circle</span><span class="info-content">\e9ec</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-alert-triangle"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-alert-triangle</span><span class="info-content">\e908</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-triangle"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-triangle</span><span class="info-content">\e9cb</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-tv"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-tv</span><span class="info-content">\e9cc</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-align-center"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-align-center</span><span class="info-content">\e909</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-align-justify"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-align-justify</span><span class="info-content">\e90a</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-align-left"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-align-left</span><span class="info-content">\e90b</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-align-right"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-align-right</span><span class="info-content">\e90c</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-list"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-list</span><span class="info-content">\e96f</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-menu"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-menu</span><span class="info-content">\e979</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-anchor"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-anchor</span><span class="info-content">\e90d</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-aperture"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-aperture</span><span class="info-content">\e90e</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-at-sign"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-at-sign</span><span class="info-content">\e913</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-arrow-down-left"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-arrow-down-left</span><span class="info-content">\e90f</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-arrow-down-right"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-arrow-down-right</span><span class="info-content">\e910</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-arrow-down"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-arrow-down</span><span class="info-content">\e911</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-arrow-left"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-arrow-left</span><span class="info-content">\e912</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-arrow-right"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-arrow-right</span><span class="info-content">\e914</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-arrow-up-left"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-arrow-up-left</span><span class="info-content">\e915</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-arrow-up-right"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-arrow-up-right</span><span class="info-content">\e916</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-arrow-up"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-arrow-up</span><span class="info-content">\e917</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-chevron-up"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-chevron-up</span><span class="info-content">\e92a</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-chevron-down"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-chevron-down</span><span class="info-content">\e927</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-chevron-left"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-chevron-left</span><span class="info-content">\e928</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-chevron-right"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-chevron-right</span><span class="info-content">\e929</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-chevrons-up"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-chevrons-up</span><span class="info-content">\e92e</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-chevrons-down"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-chevrons-down</span><span class="info-content">\e92b</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-chevrons-left"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-chevrons-left</span><span class="info-content">\e92c</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-chevrons-right"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-chevrons-right</span><span class="info-content">\e92d</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-corner-up-right"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-corner-up-right</span><span class="info-content">\e944</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-corner-up-left"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-corner-up-left</span><span class="info-content">\e943</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-corner-down-right"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-corner-down-right</span><span class="info-content">\e93e</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-corner-down-left"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-corner-down-left</span><span class="info-content">\e93d</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-corner-left-down"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-corner-left-down</span><span class="info-content">\e93f</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-corner-right-down"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-corner-right-down</span><span class="info-content">\e941</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-corner-left-up"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-corner-left-up</span><span class="info-content">\e940</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-corner-right-up"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-corner-right-up</span><span class="info-content">\e942</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-award"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-award</span><span class="info-content">\e918</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-bar-chart"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-bar-chart</span><span class="info-content">\e919</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-bar-chart-2"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-bar-chart-2</span><span class="info-content">\e91a</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-pie-chart"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-pie-chart</span><span class="info-content">\e998</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-battery-charging"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-battery-charging</span><span class="info-content">\e91b</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-battery"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-battery</span><span class="info-content">\e91c</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-bell-off"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-bell-off</span><span class="info-content">\e91d</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-bell"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-bell</span><span class="info-content">\e91e</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-bluetooth"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-bluetooth</span><span class="info-content">\e91f</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-book"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-book</span><span class="info-content">\e920</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-bookmark"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-bookmark</span><span class="info-content">\e921</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-box"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-box</span><span class="info-content">\e922</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-briefcase"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-briefcase</span><span class="info-content">\e923</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-calendar"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-calendar</span><span class="info-content">\e924</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-camera-off"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-camera-off</span><span class="info-content">\e925</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-camera"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-camera</span><span class="info-content">\e926</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-cast"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-cast</span><span class="info-content">\e92f</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-check-circle"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-check-circle</span><span class="info-content">\e930</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-check-square"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-check-square</span><span class="info-content">\e931</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-chrome"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-chrome</span><span class="info-content">\e932</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-circle"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-circle</span><span class="info-content">\e933</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-clipboard"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-clipboard</span><span class="info-content">\e934</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-clock"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-clock</span><span class="info-content">\e935</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-cloud-drizzle"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-cloud-drizzle</span><span class="info-content">\e936</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-cloud-lightning"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-cloud-lightning</span><span class="info-content">\e937</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-cloud-off"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-cloud-off</span><span class="info-content">\e938</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-cloud-rain"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-cloud-rain</span><span class="info-content">\e939</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-cloud-snow"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-cloud-snow</span><span class="info-content">\e93a</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-cloud"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-cloud</span><span class="info-content">\e93b</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-codepen"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-codepen</span><span class="info-content">\e93c</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-command"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-command</span><span class="info-content">\e945</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-compass"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-compass</span><span class="info-content">\e946</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-copy"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-copy</span><span class="info-content">\e947</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-cpu"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-cpu</span><span class="info-content">\e948</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-credit-card"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-credit-card</span><span class="info-content">\e949</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-crosshair"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-crosshair</span><span class="info-content">\e94a</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-delete"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-delete</span><span class="info-content">\e94b</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-disc"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-disc</span><span class="info-content">\e94c</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-download-cloud"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-download-cloud</span><span class="info-content">\e94d</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-download"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-download</span><span class="info-content">\e94e</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-droplet"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-droplet</span><span class="info-content">\e94f</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-edit-2"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-edit-2</span><span class="info-content">\e950</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-edit-3"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-edit-3</span><span class="info-content">\e951</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-edit"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-edit</span><span class="info-content">\e952</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-external-link"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-external-link</span><span class="info-content">\e953</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-eye-off"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-eye-off</span><span class="info-content">\e954</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-eye"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-eye</span><span class="info-content">\e955</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-facebook"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-facebook</span><span class="info-content">\e956</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-feather"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-feather</span><span class="info-content">\e957</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-file-minus"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-file-minus</span><span class="info-content">\e958</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-file-plus"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-file-plus</span><span class="info-content">\e959</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-file-text"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-file-text</span><span class="info-content">\e95a</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-file"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-file</span><span class="info-content">\e95b</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-film"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-film</span><span class="info-content">\e95c</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-filter"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-filter</span><span class="info-content">\e95d</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-flag"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-flag</span><span class="info-content">\e95e</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-folder"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-folder</span><span class="info-content">\e95f</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-github"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-github</span><span class="info-content">\e960</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-gitlab"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-gitlab</span><span class="info-content">\e961</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-globe"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-globe</span><span class="info-content">\e962</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-grid"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-grid</span><span class="info-content">\e963</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-hash"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-hash</span><span class="info-content">\e964</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-headphones"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-headphones</span><span class="info-content">\e965</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-heart"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-heart</span><span class="info-content">\e966</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-home"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-home</span><span class="info-content">\e967</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-image"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-image</span><span class="info-content">\e968</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-inbox"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-inbox</span><span class="info-content">\e969</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-info"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-info</span><span class="info-content">\e96a</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-instagram"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-instagram</span><span class="info-content">\e96b</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-layers"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-layers</span><span class="info-content">\e96c</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-layout"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-layout</span><span class="info-content">\e96d</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-life-buoy"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-life-buoy</span><span class="info-content">\e96e</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-link-2"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-link-2</span><span class="info-content">\e970</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-link"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-link</span><span class="info-content">\e971</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-loader"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-loader</span><span class="info-content">\e972</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-lock"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-lock</span><span class="info-content">\e973</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-log-in"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-log-in</span><span class="info-content">\e974</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-log-out"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-log-out</span><span class="info-content">\e975</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-mail"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-mail</span><span class="info-content">\e976</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-map-pin"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-map-pin</span><span class="info-content">\e977</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-map"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-map</span><span class="info-content">\e978</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-maximize-2"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-maximize-2</span><span class="info-content">\e97a</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-minimize-2"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-minimize-2</span><span class="info-content">\e97e</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-minimize"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-minimize</span><span class="info-content">\e97f</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-maximize"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-maximize</span><span class="info-content">\e97b</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-message-circle"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-message-circle</span><span class="info-content">\e97c</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-message-square"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-message-square</span><span class="info-content">\e97d</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-mic-off"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-mic-off</span><span class="info-content">\e980</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-mic"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-mic</span><span class="info-content">\e981</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-minus-circle"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-minus-circle</span><span class="info-content">\e982</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-minus-square"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-minus-square</span><span class="info-content">\e984</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-minus"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-minus</span><span class="info-content">\e985</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-moon"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-moon</span><span class="info-content">\e986</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-more-horizontal"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-more-horizontal</span><span class="info-content">\e987</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-more-vertical"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-more-vertical</span><span class="info-content">\e988</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-move"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-move</span><span class="info-content">\e989</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-music"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-music</span><span class="info-content">\e98a</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-navigation-2"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-navigation-2</span><span class="info-content">\e98b</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-navigation"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-navigation</span><span class="info-content">\e98c</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-octagon"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-octagon</span><span class="info-content">\e98d</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-package"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-package</span><span class="info-content">\e98e</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-paperclip"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-paperclip</span><span class="info-content">\e98f</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-percent"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-percent</span><span class="info-content">\e990</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-phone-call"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-phone-call</span><span class="info-content">\e991</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-phone-forwarded"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-phone-forwarded</span><span class="info-content">\e992</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-phone-incoming"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-phone-incoming</span><span class="info-content">\e993</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-phone-missed"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-phone-missed</span><span class="info-content">\e994</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-phone-off"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-phone-off</span><span class="info-content">\e995</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-phone-outgoing"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-phone-outgoing</span><span class="info-content">\e996</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-phone"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-phone</span><span class="info-content">\e997</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-check"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-check</span><span class="info-content">\e999</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-x"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-x</span><span class="info-content">\e9e6</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-close"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-close</span><span class="info-content">\e9e6</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-plus-circle"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-plus-circle</span><span class="info-content">\e99b</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-plus-square"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-plus-square</span><span class="info-content">\e99c</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-plus"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-plus</span><span class="info-content">\e99d</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-x-square"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-x-square</span><span class="info-content">\e9e5</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-x-circle"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-x-circle</span><span class="info-content">\e9e4</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-pocket"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-pocket</span><span class="info-content">\e99e</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-power"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-power</span><span class="info-content">\e99f</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-printer"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-printer</span><span class="info-content">\e9a0</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-radio"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-radio</span><span class="info-content">\e9a1</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-refresh-ccw"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-refresh-ccw</span><span class="info-content">\e9a2</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-refresh-cw"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-refresh-cw</span><span class="info-content">\e9a3</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-repeat"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-repeat</span><span class="info-content">\e9a4</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-rotate-ccw"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-rotate-ccw</span><span class="info-content">\e9a6</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-rotate-cw"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-rotate-cw</span><span class="info-content">\e9a7</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-slash"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-slash</span><span class="info-content">\e9b5</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-save"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-save</span><span class="info-content">\e9a8</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-scissors"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-scissors</span><span class="info-content">\e9a9</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-search"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-search</span><span class="info-content">\e9aa</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-zoom-in"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-zoom-in</span><span class="info-content">\e9e8</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-zoom-out"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-zoom-out</span><span class="info-content">\e9e9</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-server"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-server</span><span class="info-content">\e9ab</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-settings"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-settings</span><span class="info-content">\e9ac</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-share-2"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-share-2</span><span class="info-content">\e9ad</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-share"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-share</span><span class="info-content">\e9ae</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-shield"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-shield</span><span class="info-content">\e9af</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-shuffle"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-shuffle</span><span class="info-content">\e9b0</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-sidebar"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-sidebar</span><span class="info-content">\e9b1</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-play-circle"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-play-circle</span><span class="info-content">\e99a</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-pause-circle"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-pause-circle</span><span class="info-content">\e9a5</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-skip-back"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-skip-back</span><span class="info-content">\e9b2</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-skip-forward"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-skip-forward</span><span class="info-content">\e9b3</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-play"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-play</span><span class="info-content">\e9b4</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-pause"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-pause</span><span class="info-content">\e9b6</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-rewind"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-rewind</span><span class="info-content">\e9b7</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-fast-forward"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-fast-forward</span><span class="info-content">\e9b8</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-slack"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-slack</span><span class="info-content">\e9b9</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-sliders"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-sliders</span><span class="info-content">\e9ba</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-smartphone"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-smartphone</span><span class="info-content">\e9bb</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-speaker"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-speaker</span><span class="info-content">\e9bc</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-square"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-square</span><span class="info-content">\e9bd</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-star"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-star</span><span class="info-content">\e9be</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-stop-circle"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-stop-circle</span><span class="info-content">\e9bf</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-sun"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-sun</span><span class="info-content">\e9c0</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-sunrise"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-sunrise</span><span class="info-content">\e9c1</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-sunset"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-sunset</span><span class="info-content">\e9c2</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-tablet"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-tablet</span><span class="info-content">\e9c3</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-tag"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-tag</span><span class="info-content">\e9c4</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-target"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-target</span><span class="info-content">\e9c5</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-thermometer"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-thermometer</span><span class="info-content">\e9c6</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-thumbs-up"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-thumbs-up</span><span class="info-content">\e9c7</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-thumbs-down"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-thumbs-down</span><span class="info-content">\e9c8</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-toggle-left"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-toggle-left</span><span class="info-content">\e9c9</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-toggle-right"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-toggle-right</span><span class="info-content">\e9ca</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-trash-2"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-trash-2</span><span class="info-content">\e9cd</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-trash"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-trash</span><span class="info-content">\e9ce</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-trending-down"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-trending-down</span><span class="info-content">\e9cf</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-trending-up"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-trending-up</span><span class="info-content">\e9d0</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-twitter"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-twitter</span><span class="info-content">\e9d1</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-umbrella"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-umbrella</span><span class="info-content">\e9d2</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-unlock"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-unlock</span><span class="info-content">\e9d3</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-upload-cloud"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-upload-cloud</span><span class="info-content">\e9d4</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-upload"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-upload</span><span class="info-content">\e9d5</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-user-check"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-user-check</span><span class="info-content">\e9d6</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-user-minus"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-user-minus</span><span class="info-content">\e9d7</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-user-plus"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-user-plus</span><span class="info-content">\e9d8</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-user-x"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-user-x</span><span class="info-content">\e9d9</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-user"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-user</span><span class="info-content">\e9da</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-users"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-users</span><span class="info-content">\e9db</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-video-off"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-video-off</span><span class="info-content">\e9dc</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-video"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-video</span><span class="info-content">\e9dd</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-voicemail"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-voicemail</span><span class="info-content">\e9de</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-volume"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-volume</span><span class="info-content">\e9df</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-volume-1"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-volume-1</span><span class="info-content">\e9e0</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-volume-2"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-volume-2</span><span class="info-content">\e9e1</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-volume-x"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-volume-x</span><span class="info-content">\e9e2</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-watch"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-watch</span><span class="info-content">\e9e3</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-wifi-off"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-wifi-off</span><span class="info-content">\e9e7</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-wifi"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-wifi</span><span class="info-content">\e9ea</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-wind"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-wind</span><span class="info-content">\e9eb</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-zap"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-zap</span><span class="info-content">\e9ed</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-crop"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-crop</span><span class="info-content">\e9ee</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-bold"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-bold</span><span class="info-content">\e9ef</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-type"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-type</span><span class="info-content">\e9f0</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-italic"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-italic</span><span class="info-content">\e9f1</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-underline"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-underline</span><span class="info-content">\e9f2</span>
                    </div>
                </div>
                <div class="view-icon-show">
                    <i class="icon-shopping-cart"></i>
                    <div class="view-icon-info">
                        <span class="info-name">icon-shopping-cart</span><span class="info-content">\e9f3</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../../dist/view.js"></script>
    <script type="text/javascript">
        // var icons = ".icon-code:before{content:\"\\e900\"}.icon-tachometer:before{content:\"\\e901\"}.icon-info-circle:before{content:\"\\e902\"}.icon-wechat:before{content:\"\\e903\"}.icon-activity:before{content:\"\\e904\"}.icon-airplay:before{content:\"\\e905\"}.icon-monitor:before{content:\"\\e983\"}.icon-alert-circle:before{content:\"\\e906\"}.icon-alert-octagon:before{content:\"\\e907\"}.icon-help-circle:before{content:\"\\e9ec\"}.icon-alert-triangle:before{content:\"\\e908\"}.icon-triangle:before{content:\"\\e9cb\"}.icon-tv:before{content:\"\\e9cc\"}.icon-align-center:before{content:\"\\e909\"}.icon-align-justify:before{content:\"\\e90a\"}.icon-align-left:before{content:\"\\e90b\"}.icon-align-right:before{content:\"\\e90c\"}.icon-list:before{content:\"\\e96f\"}.icon-menu:before{content:\"\\e979\"}.icon-anchor:before{content:\"\\e90d\"}.icon-aperture:before{content:\"\\e90e\"}.icon-at-sign:before{content:\"\\e913\"}.icon-arrow-down-left:before{content:\"\\e90f\"}.icon-arrow-down-right:before{content:\"\\e910\"}.icon-arrow-down:before{content:\"\\e911\"}.icon-arrow-left:before{content:\"\\e912\"}.icon-arrow-right:before{content:\"\\e914\"}.icon-arrow-up-left:before{content:\"\\e915\"}.icon-arrow-up-right:before{content:\"\\e916\"}.icon-arrow-up:before{content:\"\\e917\"}.icon-chevron-up:before{content:\"\\e92a\"}.icon-chevron-down:before{content:\"\\e927\"}.icon-chevron-left:before{content:\"\\e928\"}.icon-chevron-right:before{content:\"\\e929\"}.icon-chevrons-up:before{content:\"\\e92e\"}.icon-chevrons-down:before{content:\"\\e92b\"}.icon-chevrons-left:before{content:\"\\e92c\"}.icon-chevrons-right:before{content:\"\\e92d\"}.icon-corner-up-right:before{content:\"\\e944\"}.icon-corner-up-left:before{content:\"\\e943\"}.icon-corner-down-right:before{content:\"\\e93e\"}.icon-corner-down-left:before{content:\"\\e93d\"}.icon-corner-left-down:before{content:\"\\e93f\"}.icon-corner-right-down:before{content:\"\\e941\"}.icon-corner-left-up:before{content:\"\\e940\"}.icon-corner-right-up:before{content:\"\\e942\"}.icon-award:before{content:\"\\e918\"}.icon-bar-chart:before{content:\"\\e919\"}.icon-bar-chart-2:before{content:\"\\e91a\"}.icon-pie-chart:before{content:\"\\e998\"}.icon-battery-charging:before{content:\"\\e91b\"}.icon-battery:before{content:\"\\e91c\"}.icon-bell-off:before{content:\"\\e91d\"}.icon-bell:before{content:\"\\e91e\"}.icon-bluetooth:before{content:\"\\e91f\"}.icon-book:before{content:\"\\e920\"}.icon-bookmark:before{content:\"\\e921\"}.icon-box:before{content:\"\\e922\"}.icon-briefcase:before{content:\"\\e923\"}.icon-calendar:before{content:\"\\e924\"}.icon-camera-off:before{content:\"\\e925\"}.icon-camera:before{content:\"\\e926\"}.icon-cast:before{content:\"\\e92f\"}.icon-check-circle:before{content:\"\\e930\"}.icon-check-square:before{content:\"\\e931\"}.icon-chrome:before{content:\"\\e932\"}.icon-circle:before{content:\"\\e933\"}.icon-clipboard:before{content:\"\\e934\"}.icon-clock:before{content:\"\\e935\"}.icon-cloud-drizzle:before{content:\"\\e936\"}.icon-cloud-lightning:before{content:\"\\e937\"}.icon-cloud-off:before{content:\"\\e938\"}.icon-cloud-rain:before{content:\"\\e939\"}.icon-cloud-snow:before{content:\"\\e93a\"}.icon-cloud:before{content:\"\\e93b\"}.icon-codepen:before{content:\"\\e93c\"}.icon-command:before{content:\"\\e945\"}.icon-compass:before{content:\"\\e946\"}.icon-copy:before{content:\"\\e947\"}.icon-cpu:before{content:\"\\e948\"}.icon-credit-card:before{content:\"\\e949\"}.icon-crosshair:before{content:\"\\e94a\"}.icon-delete:before{content:\"\\e94b\"}.icon-disc:before{content:\"\\e94c\"}.icon-download-cloud:before{content:\"\\e94d\"}.icon-download:before{content:\"\\e94e\"}.icon-droplet:before{content:\"\\e94f\"}.icon-edit-2:before{content:\"\\e950\"}.icon-edit-3:before{content:\"\\e951\"}.icon-edit:before{content:\"\\e952\"}.icon-external-link:before{content:\"\\e953\"}.icon-eye-off:before{content:\"\\e954\"}.icon-eye:before{content:\"\\e955\"}.icon-facebook:before{content:\"\\e956\"}.icon-feather:before{content:\"\\e957\"}.icon-file-minus:before{content:\"\\e958\"}.icon-file-plus:before{content:\"\\e959\"}.icon-file-text:before{content:\"\\e95a\"}.icon-file:before{content:\"\\e95b\"}.icon-film:before{content:\"\\e95c\"}.icon-filter:before{content:\"\\e95d\"}.icon-flag:before{content:\"\\e95e\"}.icon-folder:before{content:\"\\e95f\"}.icon-github:before{content:\"\\e960\"}.icon-gitlab:before{content:\"\\e961\"}.icon-globe:before{content:\"\\e962\"}.icon-grid:before{content:\"\\e963\"}.icon-hash:before{content:\"\\e964\"}.icon-headphones:before{content:\"\\e965\"}.icon-heart:before{content:\"\\e966\"}.icon-home:before{content:\"\\e967\"}.icon-image:before{content:\"\\e968\"}.icon-inbox:before{content:\"\\e969\"}.icon-info:before{content:\"\\e96a\"}.icon-instagram:before{content:\"\\e96b\"}.icon-layers:before{content:\"\\e96c\"}.icon-layout:before{content:\"\\e96d\"}.icon-life-buoy:before{content:\"\\e96e\"}.icon-link-2:before{content:\"\\e970\"}.icon-link:before{content:\"\\e971\"}.icon-loader:before{content:\"\\e972\"}.icon-lock:before{content:\"\\e973\"}.icon-log-in:before{content:\"\\e974\"}.icon-log-out:before{content:\"\\e975\"}.icon-mail:before{content:\"\\e976\"}.icon-map-pin:before{content:\"\\e977\"}.icon-map:before{content:\"\\e978\"}.icon-maximize-2:before{content:\"\\e97a\"}.icon-minimize-2:before{content:\"\\e97e\"}.icon-minimize:before{content:\"\\e97f\"}.icon-maximize:before{content:\"\\e97b\"}.icon-message-circle:before{content:\"\\e97c\"}.icon-message-square:before{content:\"\\e97d\"}.icon-mic-off:before{content:\"\\e980\"}.icon-mic:before{content:\"\\e981\"}.icon-minus-circle:before{content:\"\\e982\"}.icon-minus-square:before{content:\"\\e984\"}.icon-minus:before{content:\"\\e985\"}.icon-moon:before{content:\"\\e986\"}.icon-more-horizontal:before{content:\"\\e987\"}.icon-more-vertical:before{content:\"\\e988\"}.icon-move:before{content:\"\\e989\"}.icon-music:before{content:\"\\e98a\"}.icon-navigation-2:before{content:\"\\e98b\"}.icon-navigation:before{content:\"\\e98c\"}.icon-octagon:before{content:\"\\e98d\"}.icon-package:before{content:\"\\e98e\"}.icon-paperclip:before{content:\"\\e98f\"}.icon-percent:before{content:\"\\e990\"}.icon-phone-call:before{content:\"\\e991\"}.icon-phone-forwarded:before{content:\"\\e992\"}.icon-phone-incoming:before{content:\"\\e993\"}.icon-phone-missed:before{content:\"\\e994\"}.icon-phone-off:before{content:\"\\e995\"}.icon-phone-outgoing:before{content:\"\\e996\"}.icon-phone:before{content:\"\\e997\"}.icon-check:before{content:\"\\e999\"}.icon-x:before{content:\"\\e9e6\"}.icon-close:before{content:\"\\e9e6\"}.icon-plus-circle:before{content:\"\\e99b\"}.icon-plus-square:before{content:\"\\e99c\"}.icon-plus:before{content:\"\\e99d\"}.icon-x-square:before{content:\"\\e9e5\"}.icon-x-circle:before{content:\"\\e9e4\"}.icon-pocket:before{content:\"\\e99e\"}.icon-power:before{content:\"\\e99f\"}.icon-printer:before{content:\"\\e9a0\"}.icon-radio:before{content:\"\\e9a1\"}.icon-refresh-ccw:before{content:\"\\e9a2\"}.icon-refresh-cw:before{content:\"\\e9a3\"}.icon-repeat:before{content:\"\\e9a4\"}.icon-rotate-ccw:before{content:\"\\e9a6\"}.icon-rotate-cw:before{content:\"\\e9a7\"}.icon-slash:before{content:\"\\e9b5\"}.icon-save:before{content:\"\\e9a8\"}.icon-scissors:before{content:\"\\e9a9\"}.icon-search:before{content:\"\\e9aa\"}.icon-zoom-in:before{content:\"\\e9e8\"}.icon-zoom-out:before{content:\"\\e9e9\"}.icon-server:before{content:\"\\e9ab\"}.icon-settings:before{content:\"\\e9ac\"}.icon-share-2:before{content:\"\\e9ad\"}.icon-share:before{content:\"\\e9ae\"}.icon-shield:before{content:\"\\e9af\"}.icon-shuffle:before{content:\"\\e9b0\"}.icon-sidebar:before{content:\"\\e9b1\"}.icon-play-circle:before{content:\"\\e99a\"}.icon-pause-circle:before{content:\"\\e9a5\"}.icon-skip-back:before{content:\"\\e9b2\"}.icon-skip-forward:before{content:\"\\e9b3\"}.icon-play:before{content:\"\\e9b4\"}.icon-pause:before{content:\"\\e9b6\"}.icon-rewind:before{content:\"\\e9b7\"}.icon-fast-forward:before{content:\"\\e9b8\"}.icon-slack:before{content:\"\\e9b9\"}.icon-sliders:before{content:\"\\e9ba\"}.icon-smartphone:before{content:\"\\e9bb\"}.icon-speaker:before{content:\"\\e9bc\"}.icon-square:before{content:\"\\e9bd\"}.icon-star:before{content:\"\\e9be\"}.icon-stop-circle:before{content:\"\\e9bf\"}.icon-sun:before{content:\"\\e9c0\"}.icon-sunrise:before{content:\"\\e9c1\"}.icon-sunset:before{content:\"\\e9c2\"}.icon-tablet:before{content:\"\\e9c3\"}.icon-tag:before{content:\"\\e9c4\"}.icon-target:before{content:\"\\e9c5\"}.icon-thermometer:before{content:\"\\e9c6\"}.icon-thumbs-up:before{content:\"\\e9c7\"}.icon-thumbs-down:before{content:\"\\e9c8\"}.icon-toggle-left:before{content:\"\\e9c9\"}.icon-toggle-right:before{content:\"\\e9ca\"}.icon-trash-2:before{content:\"\\e9cd\"}.icon-trash:before{content:\"\\e9ce\"}.icon-trending-down:before{content:\"\\e9cf\"}.icon-trending-up:before{content:\"\\e9d0\"}.icon-twitter:before{content:\"\\e9d1\"}.icon-umbrella:before{content:\"\\e9d2\"}.icon-unlock:before{content:\"\\e9d3\"}.icon-upload-cloud:before{content:\"\\e9d4\"}.icon-upload:before{content:\"\\e9d5\"}.icon-user-check:before{content:\"\\e9d6\"}.icon-user-minus:before{content:\"\\e9d7\"}.icon-user-plus:before{content:\"\\e9d8\"}.icon-user-x:before{content:\"\\e9d9\"}.icon-user:before{content:\"\\e9da\"}.icon-users:before{content:\"\\e9db\"}.icon-video-off:before{content:\"\\e9dc\"}.icon-video:before{content:\"\\e9dd\"}.icon-voicemail:before{content:\"\\e9de\"}.icon-volume:before{content:\"\\e9df\"}.icon-volume-1:before{content:\"\\e9e0\"}.icon-volume-2:before{content:\"\\e9e1\"}.icon-volume-x:before{content:\"\\e9e2\"}.icon-watch:before{content:\"\\e9e3\"}.icon-wifi-off:before{content:\"\\e9e7\"}.icon-wifi:before{content:\"\\e9ea\"}.icon-wind:before{content:\"\\e9eb\"}.icon-zap:before{content:\"\\e9ed\"}.icon-crop:before{content:\"\\e9ee\"}.icon-bold:before{content:\"\\e9ef\"}.icon-type:before{content:\"\\e9f0\"}.icon-italic:before{content:\"\\e9f1\"}.icon-underline:before{content:\"\\e9f2\"}.icon-shopping-cart:before{content:\"\\e9f3\"}";
        // var arrs = icons.split("}"), htmlArr = "";
        // view.each(arrs, function(i, item){
        //     if(item === "") return false;
        //     var iconName = item.substring(1, item.indexOf(":")), iconContent = item.substring(item.lastIndexOf(":") + 1);
        //     iconContent = iconContent.replace("\"", "").replace("\"", "");
        //     var iconHtml = [
        //         "<div class='view-icon-show'>",
        //             "<i class='"+ iconName +"'></i>",
        //             "<div class='view-icon-info'>",
        //                 "<span class='info-name'>"+ iconName +"</span>",
        //                 "<span class='info-content'>"+ iconContent +"</span>",
        //             "</div>",
        //         "</div>",
        //     ].join("");
        //     htmlArr += iconHtml;
        // });
        // document.write(htmlArr);
    </script>
</body>
</html>